<template>
  <div class="player">
    <div class="content">
      <ul class="tabs_box">
        <li 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="currentTab === index ? 'tab_item_active':'tab_item'"
          @click="currentTab = index">{{tab}}</li>
      </ul>
      <div class="tab_box">
        <div v-show="currentTab === 0">
          <total-money :userinfo="userinfo" @refresh-click="refreshClick"/>
          <div class="username_box">
            <van-field v-model="username01" type="text" @click-input="userContentChange" label="用户名" placeholder="请输入用户名"/>
            <span class="icon_down" @click="userIconChange"></span>
            <ul class="user_list" v-show="isAccountUserShow">
              <li>请选择用户名:</li>
              <li 
                v-for="(item, index) in accountUser" 
                :key="index"
                @click="chooseUser(item)">{{item}}</li>
              <li class="user_item_list" v-show="accountUser.length == 0">无历史记录</li>
            </ul>
          </div>
          <div class="game_list">
            <van-field v-model="game01" @input="gameChange" clearable type="text" label="选择游戏" placeholder="游戏名称"/>
            <van-button class="btn" @click="queryGame" color="linear-gradient(131deg,#ffac58 4%, #ff4600 96%)">查询</van-button>
            <ul v-show="gameListShow">
              <li>请选择游戏:</li>
              <li @click="selectGame(index)" v-for="(game, index) in gameLists" :key="index">{{game.gamename}}</li>
            </ul>
          </div>
          <p class="game_tips">*请选择正确的游戏，以免喵币扣除计算错误</p>
          <van-field v-model="ratable01" type="text" label="分成比例" readonly placeholder="游戏分成比例"/>
          <van-field v-model="coupon01" clearable type="digit" maxlength="5" label="代金券" @input="takeCoupon" placeholder="到账代金券"/>
          <van-field v-model="deduct01" type="number" label="扣除" readonly placeholder="到账喵币"/>
          <van-field v-show="userinfo && userinfo.has_g_pwd" clearable v-model="password01" type="password" label="支付密码" placeholder="请输入支付密码"/>
          <div v-show="userinfo && !userinfo.has_g_pwd" class="set_up">
            <span class="pay_title">支付密码</span>
            <van-button round color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" class="set_up_btn"  to="/change_withdrawal_password?title=payment">去设置</van-button>
          </div>
          <van-button class="confirm" @click="onConfirm" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>确定</van-button>
        </div>
        <div v-show="currentTab === 1">
          <total-money :userinfo="userinfo" @refresh-click="refreshClick"/>
          <div class="username_box">
            <van-field v-model="username02" type="text" @click-input="userPtbChange" label="用户名" placeholder="请输入用户名"/>
            <span class="icon_down" @click="ptbIconChange"></span>
            <ul class="user_list" v-show="isAccountPtbShow">
              <li>请选择用户名:</li>
              <li 
                v-for="(item, index) in accountPtb" 
                :key="index"
                @click="choosePtb(item)">{{item}}</li>
              <li class="user_item_list" v-show="accountPtb.length == 0">无历史记录</li>
            </ul>
          </div>
          <van-field v-model="amount02" type="digit" clearable label="喵币" placeholder="请输入喵币数量" @input="changeInput"/>
          <p class="game_tips tips_right">默认比例为1:1</p>
          <van-field v-model="amount02" type="number" label="平台币" readonly placeholder="到账平台币"/>
          <van-field v-model="amount02" type="number" label="扣除" readonly placeholder="到账喵币"/>
          <van-field v-show="userinfo && userinfo.has_g_pwd" v-model="password02" clearable type="password" label="支付密码" placeholder="请输入支付密码"/>
          <div v-show="userinfo && !userinfo.has_g_pwd" class="set_up">
            <span class="pay_title">支付密码</span>
            <van-button round color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" class="set_up_btn"  to="/change_withdrawal_password?title=payment">去设置</van-button>
          </div>
          <van-button class="confirm" @click="rechargePtb" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>确定</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQueryString, homeData } from '../../../common/common'
import { getCoupon, getGameNameQuery, getHomePage, getPtb } from '../../../network/home'
import TotalMoney from './childComps/TotalMoney.vue'
import loginValidate from '../../../mixins/loginValidate'
export default {
  // mixins: [loginValidate],
  components: { TotalMoney },
  data() {
    return {
      tabs: ['充值代金券', '充值平台币'],
      currentTab: 0,
      username01: '',
      game01: '',
      ratable01: '',
      coupon01: '',
      deduct01: '',
      password01: '',
      username02: '',
      amount02: '',
      password02: '',
      username03: '',
      begin_time: '',
      end_time: '',
      record: [{
          a_id: "859",
          id: "24",
          logtime: "1635903670",
          remark: "测试",
          remote_order_sn: "",
          tgid: "ca00000",
          total: "100.00",
          typeid: "3",
          uid: "1",
        },{
          a_id: "0",
          id: "23",
          logtime: "1635843027",
          remark: "",
          remote_order_sn: "13",
          tgid: "ca00000",
          total: "-1.00",
          typeid: "2",
          uid: "1",
        },{
          a_id: "0",
          id: "22",
          logtime: "1635842862",
          remark: "",
          remote_order_sn: "12",
          tgid: "ca00000",
          total: "-1.00",
          typeid: "2",
          uid: "1",
        }],
      type_arr: {1: "储值获取", 2: "代充消耗", 3: "后台添加", 4: "提现获得", 5: "人工打款"},
      gameLists: null,
      gameListShow: false,
      gamelist: null,
      accountUser: [],//账号保存到cookies
      isAccountUserShow: false,
      accountPtb: [],//账号保存到cookies
      isAccountPtbShow: false,
      userinfo: null,
    }
  },
  created () {
    const uid = getQueryString('tgid')
    const token = getQueryString('token')
    if (uid && token) {
        this.$cookies.set('tgid', uid, '1d')
        this.$cookies.set('token', token, '1d')
    }
    this.getData()
  },
  methods: {
    getData() {
      getHomePage().then(res => {
        if(res.state === 'ok') {
          console.log(res)
          this.userinfo = res.data
          if(this.$cookieStore.getCookie('accountUser' + this.userinfo.tgid)) {
            var newStr = this.$cookieStore.getCookie('accountUser' + this.userinfo.tgid)
            this.accountUser = newStr.split(',')
            this.username = this.accountUser[0]
          }
          if(this.$cookieStore.getCookie('accountPtb' + this.userinfo.tgid)) {
            var newStr = this.$cookieStore.getCookie('accountPtb' + this.userinfo.tgid)
            this.accountPtb = newStr.split(',')
            this.username = this.accountPtb[0]
          }
        } else if (res.state === 'err') {
          if(res.msg === 'no_login') {
            this.$toast(res.msg)
            this.$router.replace('/login')
          }else {
            this.$toast(res.msg)
          }
        }
      })
    },
    refreshClick() {
      getHomePage().then(res => {
        if(res.state === 'ok') {
          this.userinfo = res.data
        } else if (res.state === 'err') {
        if(res.msg === 'no_login') {
          this.$toast(res.msg)
          this.$router.replace('/login')
        }else {
          this.$toast(res.msg)
        }
      }
      })
    },
    rechargePtb() {
      getPtb(this.amount02,this.username02,this.password02).then(res => {
        console.log(res)
        if(res.state === 'ok') {
          this.$toast('充值成功')
          this.accountPtb.unshift(this.username02)
          this.accountPtb = this.unique(this.accountPtb)
          if(this.accountPtb.length > 5) {
            this.accountPtb = this.accountPtb.slice(0, 5)
          }
          this.$cookieStore.setCookie('accountPtb' + this.userinfo.tgid, this.accountPtb,315360000)
          this.empty()
          homeData()
        }else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
      })
    },
    queryGame() { 
      if (!this.game01) return this.$toast('请输入游戏名称~')
      getGameNameQuery(this.game01).then(res => {
        if (res.state === 'ok' && res.data.list !== null) {
          this.gameListShow = true
          this.gameLists = res.data.list
        }else{
          this.$toast('没有可搜索的结果~')
        }
      })
    },
    selectGame(index) {
      if (this.gameLists) {
        this.gameListShow = false
        this.game01 = this.gameLists[index].gamename
        this.gamelist = this.gameLists[index]
        this.ratable01 = (10 - parseFloat(this.gamelist.dc_discount)) * 10 + '%'
        console.log(this.ratable01)
      }
    },
    takeCoupon(value) {
      if (this.gameLists) {
        this.deduct01 = (parseFloat(this.gamelist.dc_discount) / 10).toFixed(2) * value
        this.deduct01 = this.deduct01.toFixed(2)
      }
      var val = value
      if (val > 0) {
        let length = val.length;
        for (let i = 0; i < length; i++) {
          if (val[0] == 0) {
              val = val.substr(1)
          } else {
              break;
          }
        }
      }
      this.coupon01 = val
    },
    gameChange(val) {
      this.gameListShow = false
      this.ratable01 = ''
      this.coupon01 = ''
      this.deduct01 = ''
    },
    onConfirm() {
      if (!this.username01) return this.$toast('请输入用户名~')
      if (!this.gamelist) return this.$toast('请选择充值游戏~')
      if (!this.coupon01) return this.$toast('请输入充值金额~')
      if (!this.password01) return this.$toast('请输入支付密码~')
      getCoupon(this.coupon01, this.username01, this.password01, this.gamelist.gameid).then(res => {
        if (res.state === "ok") {
          this.$toast('充值成功')
          this.accountUser.unshift(this.username01)
          this.accountUser = this.unique(this.accountUser)
          if(this.accountUser.length > 5) {
            this.accountUser = this.accountUser.slice(0, 5)
          }
          this.$cookieStore.setCookie('accountUser' + this.userinfo.tgid, this.accountUser,315360000)
          this.empty()
          homeData()
        } else if (res.state === "err") {
          if (res.msg === "no_login") {
            this.$toast(res.msg)
            this.$router.replace("/login")
          } else {
            this.$toast(res.msg)
          }
        }
      })
    },
    changeInput(value) {
      var val = value
      if (val > 0) {
        let length = val.length;
        for (let i = 0; i < length; i++) {
          if (val[0] == 0) {
              val = val.substr(1)
          } else {
              break;
          }
        }
      }
      this.amount02 = val
    },
    unique (arr) {
      //数组去重
      return Array.from(new Set(arr))
    },
    chooseUser(val) {
      this.username01 = val
      this.isAccountUserShow = false
    },
    choosePtb(val) {
      this.username02 = val
      this.isAccountPtbShow = false
    },
    userIconChange() {
      this.isAccountUserShow = !this.isAccountUserShow
    },
    ptbIconChange() {
      this.isAccountPtbShow = !this.isAccountPtbShow
    },
    userContentChange() {
      this.isAccountUserShow = false
    },
    userPtbChange() {
      this.isAccountPtbShow = false
    },
    empty() {
      this.username01 = ''
      this.game01 = ''
      this.coupon01 = ''
      this.gamelist = null
      this.ratable01 = ''
      this.deduct01 = ''
      this.password01 = ''
      this.username02 = ''
      this.amount02 = ''
      this.password02 = ''
    }
  },
}
</script>

<style lang="less" scoped>
.player {
  height: 100%;
  background: #fff;
  padding-bottom: 30px;
}

.content {
  box-sizing: border-box;
  padding: 40px 30px;
  margin: 0 auto 50px;
  width: 686px;
  height: auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
}

.tabs_box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #222;
  .tab_item {
    font-size: 26px;
    font-weight: 500;
    padding: 0 10px;
  }
  .tab_item_active {
    font-size: 32px;
    font-weight: 600;
    padding: 0 10px;
    position: relative;
  }
  .tab_item_active::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    width: 60px;
    height: 6px;
    background: #ff5543;
  }
}

.tab_box {
  padding-top: 40px;
}

.van-field {
  font-size: 28px;
  height: 86px;
  padding: 0 40px;
  line-height: 86px;
  background: #F3F3F3;
  border-radius: 20px;
  margin-bottom: 20px;
}

.game_list {
  display: flex;
  align-items: flex-start;
  position: relative;
  .btn {
    padding: 0;
    width: 120px;
    height: 86px;
    border-radius: 20px;
    margin: 0;
    font-size: 26px;
    margin-left: 36px;
  }
  ul {
    box-sizing: border-box;
    padding: 0 20px;
    position: absolute;
    width: 496px;
    top: 80px;
    left: 0;
    max-height: 500px;
    z-index: 99;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
    overflow: auto;
    li {
      line-height: 66px;
      font-size: 24px;
      color: #333;
      border-bottom: 1px solid #eee;
    }
  }
}

.game_tips {
  font-size: 22px;
  color: #FF5543;
  margin-bottom: 20px;
}

.tips_right {
  text-align: right;
}

.confirm {
  width: 550px;
  height: 86px;
  margin: 0 auto;
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-top: 40px;
}

.my_amount {
  position: relative;
  box-sizing: border-box;
  padding: 20px 30px;
  width: 626px;
  height: 140px;
  background: #7974ff;
  border-radius: 20px;
  margin-bottom: 40px;
  color: #fff;
  .my_amount_top {
    display: flex;
    align-items: center;
    height: 34px;
    .my_title {
      line-height: 34px;
      font-size: 28px;
      font-weight: 700;
      padding-right: 15px;
    }
  }
  h4 {
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0px 1px 6px 0px #1a13c8; 
    padding-top: 20px;
  }
}

.my_amount::before {
  content: '';
  position: absolute;
  top: -22px;
  right: -22px;
  width: 138px;
  height: 138px;
  background: url('../../../assets/img/charge/money.png') no-repeat;
  background-size: 100%;
}

table {
  margin-top: 60px;
  width: 626px;
  height: auto;
  background: #F3F3F3;
  border-radius: 20px;
  tr {
    width: 626px;
    display: flex;
    align-items: center;
    height: 86px;
    font-size: 24px;
    color: #222;
    border-bottom: 1px solid #fff;
    th {
      flex: 1;
    }
    td {
      flex: 1;
      text-align: center;
      span {
        display: inline-block;
      }
    }
  }
  tr:nth-child(1) {
    background: #7974FF;
    border-radius: 20px 20px 0px 0px;
    font-size: 28px;
    color: #fff;
    border: 0;
  }
  tr:last-child {
    border: 0;
  }
}

.set_up {
  width: 546px;
  height: 86px;
  background: #f3f3f3;
  border-radius: 20px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  .pay_title {
    font-size: 28px;
    color: #646566;
    padding-right: 75px;
  }
  .set_up_btn {
    font-size: 24px;
    width: 150px;
    height: 48px;
  }
}

.username_box {
  position: relative;
  .icon_down {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url('../../../assets/img/charge/icon_down.png') no-repeat;
    background-size: 100%;
  }
  .user_list {
    box-sizing: border-box;
    padding: 10px 20px;
    position: absolute;
    top: 88px;
    left: 200px;
    width: 420px;
    max-height: 500px;
    background: #fff;
    z-index: 99;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
    line-height: 60px;
    font-size: 24px;
    overflow: auto;
    .user_item_list {
      text-align: center;
      color: #999;
    }
  }
}
</style>